<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航</title>
    <%- include common %>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        #info {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        #photo {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .nav-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    </style>
</head>

<body>

    <div class="container-fluid">
        <div class="nav-top col-lg-12 nav-tabs  " style="height: 60px;background-color:#337ab7;">
            <span class="pull-left " style="font-size: 30px; color: black;">xxxx管理系统</span>
            <div class="btn-group pull-right">
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                    Action <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            </li>
        </div>

        <div class=" col-lg-3  col-md-6 col-sm-6  ">
            <ul class="nav   nav-pills nav-stacked ">
                <li id="info">
                    <img id="photo" src="/images/title.jpg" alt="">
                    <span style="color: black;">欢迎您，xxxx！</span>
                    <button class="btn btn-danger">
                        <a href="">退出登录</a>
                    </button>
                </li>
                <li role="presentation" class="active"><a href="bar-1">Bar 1</a></li>
                <li role="presentation" class="active">
                    <a href="#docCollapse" class="nav-header collapsed " data-toggle="collapse">Bar 2<span
                            class="pull-right glyphicon glyphicon-chevron-down"></span></a>
                    <ul id="docCollapse" class="nav nav-list collapse">
                        <li><a href="#">Child Bar 1</a></li>
                        <li><a href="#">Child Bar 2</a></li>
                    </ul>
                </li>
                <li role="presentation"><a href="bar-3">Bar 3</a></li>
                <li role="presentation">
                    <a href="#docCollapse_1" class="nav-header collapsed" data-toggle="collapse">Bar 2<span
                            class="pull-right glyphicon glyphicon-chevron-down"></span></a>
                    <ul id="docCollapse_1" class="nav nav-list collapse">
                        <li><a href="#">Child Bar 1</a></li>
                        <li><a href="#">Child Bar 2</a></li>
                    </ul>
                </li>
                <li role="presentation"><a href="bar-3">Bar 3</a></li>
                <li role="presentation">
                    <a href="#docCollapse_2" class="nav-header collapsed" data-toggle="collapse">Bar 2<span
                            class="pull-right glyphicon glyphicon-chevron-down"></span></a>
                    <ul id="docCollapse_2" class="nav nav-list collapse">
                        <li><a href="#">Child Bar 1</a></li>
                        <li><a href="#">Child Bar 2</a></li>
                    </ul>
                </li>
            </ul>

        </div>
        <div class="nav col-lg-9 " style=" height: 500px;background-color:black;"></div>
    </div>


</body>

</html>